<template>
  <el-tabs type="border-card" @tab-click="tabCut">
    <el-tab-pane label="全国总排名">
      <wholeCountry v-if="type === '全国总排名'" />
    </el-tab-pane>

    <el-tab-pane label="全省总排名">
      <wholePro
        v-if="type === '全省总排名'"
        :zoetisParamsList="zoetisParamsList"
        :provinceList="provinceList"
      />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import wholeCountry from './subpage/wholeCountry.vue'
import wholePro from './subpage/wholePro.vue'
import { getProvinceList, getZoetisParamsList } from '@/api/skinDisease/rankstu/rankstuApis'

export default {
  name: 'collocate',
  components: {
    wholeCountry,
    wholePro
  },
  data() {
    return {
      type: '全国总排名',
      provinceList: [],
      zoetisParamsList: []
    }
  },
  mounted() {
    this.queryProvinces()
    this.queryZoetisParamsList()
  },
  methods: {
    tabCut(e) {
      this.type = e.label
    },
    queryProvinces() {
      getProvinceList({ id: 0 }).then(res => {
        this.provinceList = res.data
      })
    },
    queryZoetisParamsList() {
      getZoetisParamsList('classify_ranking_type').then(res => {
        this.zoetisParamsList = res.data
      })
    }
  }
}
</script>

<style scoped></style>
